<template>
  <div class="article-comment">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error="error"
      error-text="加载失败"
      :immediate-check="false"
    >
      <comment-item
        v-for="(item, index) in list"
        :key="index"
        :comment="item"
        @reply-click="$emit('reply-click', $event)"
      />
    </van-list>
  </div>
</template>

<script>
import { getComment } from "@/api/comment";
import CommentItem from "./comment-item.vue";
export default {
  data() {
    return {
      // list: [],
      loading: false,
      finished: false,
      offset: null, //获取写一页的时间戳标记
      limit: 10,
      error: false,
      // immediate-check=false
    };
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 请求获取数据
      // 数据添加列表
      // 设置loading 状态为false
      // 判断是否有无数据 更新获取下一页数据/将finished加载结束
      try {
        // 获取文章评论的和评论的回复是同一个接口
        // 区别参数不同
        // 评论 a 回复c
        const { data } = await getComment({
          type: 'a', //this.type, //评论类型 评论a 回复c
          source: this.source.toString(), //
          offset: this.offset, //文字评论
          limit: this.limit, //获取的评论个数
        });

        console.log(data);
        // 数据添加列表
        const { results } = data.data;
        this.list.push(...results);

        // 文章评论总数传递外部
        this.$emit("onload-success", data.data);
        // 设置状态
        this.loading = false;
        // 判断是否有无数据
        if (results.length) {
          // 获取下一页数据的页码
          this.offset = data.data.last_id;
        } else {
          // 设置加载结束;
          this.finished = true;
        }
      } catch (err) {
        this.error = true;
        this.loading = false;
      }
    },
  },
  props: {
    source: {
      type: [ String],
      required: true,
    },
    list: {
      type: Array,
      dafault: () => [], 
      // required:true // 两个写法一样
    },
    type: {
      type: String,
      // 自定义Prop数据验证
      validator(value) {
        return ["a", "c"].includes(value); //数组只能包括a  c 内容
      },
      dafault: "a", //默认
    },
  },
  created() {
    this.onLoad(); //渲染出来直接调用  不调用需要把文章拉倒最后才显示评论总数
    this.loading = true; //手动开启初始loading
  },
  components: {
    CommentItem,
  },
};
</script>

<style>
</style>